<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>${database}</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        font-family: 'microsoft yahei', 'Times New Roman', '宋体', Times, serif;
        color: rgba(13, 27, 62, .75);
    }

    html, body {
        width: 100%;
        height: 100%;
    }

    /*滚动条样式*/
    ::-webkit-scrollbar { /*滚动条整体样式*/
        width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 5px;
    }

    ::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
        border-radius: 5px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #e0e5eb;
    }

    ::-webkit-scrollbar-track { /*滚动条里面轨道*/
    / / -webkit-box-shadow: inset 0 0 5 px rgba(0, 0, 0, 0.2);
        border-radius: 0;
    / / background: rgba(0, 0, 0, 0.1);
    }

    input {
        width: 90%;
        height: 36px;
        padding-left: 10px;
        margin: 10px;
        border-radius: 3px;
        border: 1px solid #ccc;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
        -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
        -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
    }

    input:focus {
        border-color: #66afe9;
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
    }

    #box {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    #box div {
        float: left;
    }

    #left {
        width: 20%;
        border-right: 1px solid gold;
        height: 100%;
        overflow: auto;
        background: rgb(245, 252, 255);
    }

    #tableList div {
        width: 100%;
        height: 40px;
        line-height: 40px;
        text-indent: 1em;
    }

    #tableList div:hover {
        background: rgb(213, 235, 252);
    }

    #right {
        background: rgb(242, 244, 246);
        width: 79%;
        height: 100%;
        overflow: auto;
    }

    #right table {
        margin-top: 30px;
    }

    #right table tr {
        text-align: center;
        border: 1px dashed #00f;
        padding: 6px;
    }

    #right table td, th {
        height: 40px;
        border-bottom: 1px solid red;
    }

    #example, #column {
        width: 100%;
        border-radius: 5px;
        font-size: 16px;
    }
</style>
<body>
<div id="box">
    <div id="left">
        <input id="inputValue" style="font-size:16px" oninput="inputChange()" placeholder="搜索数据库表名">
        <div id="tableList"></div>
    </div>
    <div id="right">
        <table width="100%">
            <thead>
            <caption><strong id="tableComment"></strong></caption>
            <caption><strong id="tableName"></strong></caption>
            <tr>
                <th width='20%'>名称</th>
                <th width='10%'>类型</th>
                <th width='10%'>是否必填</th>
                <th width='60%'>备注</th>
            </tr>
            </thead>
            <tbody id="tableColumn"></tbody>
        </table>
        <div style="width:50%">
            <button onClick="copyCode('example')">复制</button>
            <span id="exampleMessage" style="color: red"></span>
            <button onClick="formatJson()" style="float:right">格式化/压缩</button>
            <textarea id="example" onkeyup="changeHeight()"></textarea>
        </div>
        <div style="width:50%">
            <button onClick="copyCode('column')">复制</button>
            <span id="columnMessage" style="color: red"></span>
            <textarea id="column" readonly="readonly"></textarea>

        </div>
    </div>
</div>
</body>
<script type="text/javascript">

    var tableData = {tableData: tableData};
    var table = [];
    var formatFlag = false;

    window.onload = function () {
        table = tableData;
        start();
    };

    function start() {
        document.getElementById("tableList").innerHTML = "";
        document.getElementById("tableName").innerHTML = "";
        document.getElementById("tableComment").innerHTML = "";
        document.getElementById("tableColumn").innerHTML = "";
        document.getElementById("example").value = "";
        document.getElementById("column").value = "";
        var tableList = "";
        var tableColumn = "";
        var column = "\r\n";
        if (table.length < 1) {
            return;
        }
        for (var i = 0; i < table.length; i++) {
            tableList += "<div onclick='show(" + i + ")'>" + table[i].name + "</div>";
        }
        for (var j = 0; j < table[0].column.length; j++) {
            tableColumn += "<tr><td width='20%'>" + table[0].column[j].name + "</td><td width='10%'>" + table[0].column[j].type + "</td><td width='10%'>" + table[0].column[j].null + "</td><td width='60%'>" + table[0].column[j].comment + "</td></tr>";
            column += table[0].column[j].name + " " + table[0].column[j].comment + "\r\n";
        }
        document.getElementById("tableList").innerHTML = tableList;
        document.getElementById("tableName").innerHTML = table[0].name;
        document.getElementById("tableComment").innerHTML = table[0].comment;
        document.getElementById("tableColumn").innerHTML = tableColumn;
        document.getElementById("example").value = JSON.stringify(table[0].example);

        document.getElementById("example").value = format(document.getElementById("example").value, false);
        document.getElementById("column").value = column;
        formatFlag = true;
        clearMessage();
        changeHeight();
    }

    function show(i) {
        var tableColumn = "";
        var column = "\r\n";
        for (var j = 0; j < table[i].column.length; j++) {
            tableColumn += "<tr><td width='20%'>" + table[i].column[j].name + "</td><td width='10%'>" + table[i].column[j].type + "</td><td width='10%'>" + table[i].column[j].null + "</td><td width='60%'>" + table[i].column[j].comment + "</td></tr>";
            column += table[i].column[j].name + " " + table[i].column[j].comment + "\r\n";
        }
        document.getElementById("tableComment").innerHTML = table[i].comment;
        document.getElementById("tableName").innerHTML = table[i].name;
        document.getElementById("tableColumn").innerHTML = tableColumn;
        document.getElementById("example").value = JSON.stringify(table[i].example);
        document.getElementById("example").value = format(document.getElementById("example").value, false);
        document.getElementById("column").value = column;
        formatFlag = true;
        clearMessage();
        changeHeight();
    }

    function inputChange() {
        table = fuzzyQuery(tableData, document.getElementById("inputValue").value);
        start();
    }

    /**
     * 使用test方法实现模糊查询
     * @param  {Array}  list     原数组
     * @param  {String} keyWord  查询的关键词
     * @return {Array}           查询的结果
     */
    function fuzzyQuery(list, keyWord) {
        var reg = new RegExp(keyWord, "i");
        var arr = [];
        for (var i = 0; i < list.length; i++) {
            if (reg.test(list[i].name)) {
                arr.push(list[i]);
            }
        }
        return arr;
    }

    function formatJson() {
        document.getElementById("example").value = format(document.getElementById("example").value, formatFlag);
        changeHeight();
        formatFlag = !formatFlag;
    }

    function format(txt, compress) {
        var indentChar = '    ';
        if (/^\s*$/.test(txt)) {
            console.log('数据为空,无法格式化! ');
            return;
        }
        try {
            var data = eval('(' + txt + ')');
        } catch (e) {
            console.log('数据源语法错误,格式化失败! 错误信息: ' + e.description, 'err');
            return;
        }
        var draw = [],
            last = false,
            This = this,
            line = compress ? '' : '\r\n',
            nodeCount = 0,
            maxDepth = 0;

        var notify = function (name, value, isLast, indent, formObj) {
            nodeCount++; /*节点计数*/
            for (var i = 0, tab = ''; i < indent; i++)
                tab += indentChar; /* 缩进HTML */
            tab = compress ? '' : tab; /*压缩模式忽略缩进*/
            maxDepth = ++indent; /*缩进递增并记录*/
            if (value && value.constructor == Array) {
                /*处理数组*/
                draw.push(
                    tab + (formObj ? '"' + name + '":' : '') + '[' + line
                ); /*缩进'[' 然后换行*/
                for (var i = 0; i < value.length; i++)
                    notify(i, value[i], i == value.length - 1, indent, false);
                draw.push(
                    tab + ']' + (isLast ? line : ',' + line)
                ); /*缩进']'换行,若非尾元素则添加逗号*/
            } else if (value && typeof value == 'object') {
                /*处理对象*/
                draw.push(
                    tab + (formObj ? '"' + name + '":' : '') + '{' + line
                ); /*缩进'{' 然后换行*/
                var len = 0,
                    i = 0;
                for (var key in value)
                    len++;
                for (var key in value)
                    notify(key, value[key], ++i == len, indent, true);
                draw.push(
                    tab + '}' + (isLast ? line : ',' + line)
                ); /*缩进'}'换行,若非尾元素则添加逗号*/
            } else {
                if (typeof value == 'string') value = '"' + value + '"';
                draw.push(
                    tab +
                    (formObj ? '"' + name + '":' : '') +
                    value +
                    (isLast ? '' : ',') +
                    line
                );
            }
        };
        var isLast = true,
            indent = 0;
        notify('', data, isLast, indent, false);
        return draw.join('');
    }

    function changeHeight() {
        var example = document.getElementById("example");
        var column = document.getElementById("column");
        example.style.height = 100 + "px";
        while (example.offsetHeight < example.scrollHeight) {
            example.style.height = example.scrollHeight + 100 + "px";
        }
        example.style.height = example.style.height > column.style.height ? example.style.height : column.style.height;
        column.style.height = example.style.height;
    }

    function copyCode(e) {
        var textArea = document.getElementById(e);
        textArea.select(); // 选择对象
        document.execCommand("Copy"); // 执行浏览器复制命令
        document.getElementById(e + "Message").innerText = "已复制";
        setTimeout(clearMessage, 5000);
    }

    function clearMessage() {
        document.getElementById("exampleMessage").innerText = "";
        document.getElementById("columnMessage").innerText = "";
    }
</script>
</html>